<template>
    <div class="index">
        <!-- 数据渲染 -->
        <header class="header">
            <div>
                <i class="el-icon-document icon1"></i>
                <div>
                    <span>总订单</span>{{ Data.totalOrder }}
                </div>
            </div>
            <div>
                <i class="iconfont  icon-totalamount icon2"></i>
                <div>
                    <span>总销售额</span> {{ Data.totalAmount }}
                </div>
            </div>
            <div>
                <i class="el-icon-s-order icon3"></i>
                <div>
                    <span>今日订单数</span>{{ Data.todayOrder }}
                </div>

            </div>
            <div>
                <i class="iconfont  icon-totayamount icon4"></i>
                <div>
                    <span>今日销售额</span>{{ Data.totayAmount }}
                </div>
            </div>
        </header>
        <!-- 图标 -->
        <main ref="main">

        </main>
    </div>
</template>

<script>
import { totalData } from '@/api/order.js'
import local from '@/utils/local.js'
import * as echarts from 'echarts';
export default {
    data () {

        return {
            Data: [],
        }
    },

    async mounted () {
        let res = await totalData()
        this.Data = res.data
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.main);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '数据统计', left: 20, top: 10,
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['销售统计', '订单统计'], top: 10,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '销售统计',
                    type: 'line',
                    stack: 'Total',
                    data: res.data.amountData
                },
                {
                    name: '订单统计',
                    type: 'line',
                    stack: 'Total',
                    data: res.data.orderData
                },
            ]
        });
        //重置大小
        window.onresize = function () {
            myChart.resize()
        }
    },
    destroyed () {
        window.onresize = null
    },
}

</script>

<style lang="less" scoped>
.index {
    background-color: #f0f2f5 !important;

    .header {
        display: flex;
        justify-content: space-around;

        &>div {
            width: 24%;
            height: 100px;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;

            span {
                display: block;
                color: #bbb;
                font-size: 20px;
            }

            i {
                font-size: 50px;
                margin-right: 5px;
            }
        }
    }

    .icon1,
    .icon3 {
        color: #1296df;
    }

    .icon2,
    .icon4 {
        color: #aa2d66;
    }

    main {
        height: 480px;
        width: 100%;
        margin-top: 20px;
        background-color: #fff;
        padding: 20px;
    }
}
</style>